<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    选择文件(可多选):
    <input type="file" id="f1" multiple /><br /><br />
    标题：<input type="text" id="title" name="title"/><br/><br/><br/>
    <button type="button" id="btn-submit">上 传</button>
  </div>
  <script>
    function submitUpload() {
      //获得文件列表，注意这里不是数组，而是对象
      var fileList = document.getElementById('f1').files;
      if (!fileList.length) {
        alert('请选择文件');
        return;
      }
      var fd = new FormData();   //构造FormData对象
      fd.append('title', document.getElementById('title').value);

      //多文件上传需要遍历添加到 fromdata 对象
      for (var i = 0; i < fileList.length; i++) {
        fd.append('f1', fileList[i]);//支持多文件上传
      }

      fetch('http://localhost:8100/', {
            method: 'POST',
            body: fd
        })
            .then(response => response.json())
            .then(response =>{
                console.log(response);
                if (response.fileUrl.length) {
                    alert('上传成功');
                }
            } )
            .catch(error => console.error('Error:', error));

    }

    //绑定提交事件
    document.getElementById('btn-submit').addEventListener('click', submitUpload);
  </script>

</body>

</html>